import React,{useEffect,useState} from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
const Index = () => {
    const [musics,setMusics] =useState([]);
    const Navigate=useNavigate()
    /* 1.componentDidMount */
    const fecthData=async ()=>{
        var res = await axios.get("http://122.112.161.135:3000/top/playlist");
        setMusics(res.data.playlists)
    }
    const toggle=(id)=>{
        Navigate(`/detail/${id}`)   
    }
    useEffect(()=>{
       fecthData();       
    },[ ])
    return (
        <div>
           {musics.map(item=>{
               return(<div onClick={()=>toggle(item.id)}  key={item.id*Math.random()}>{item.name}</div>)
           })}
        </div>
    );
}

export default Index;

/* 
import React, { Component } from 'react';

class Index extends Component {
    state={
        count:0
    }
    render() {
        return (
            <div onClick={this.handleCount}>
            {this.state.count}                
            </div>
        );
    }
    hadnleCount=()=>{
        this.setState({
            count:this.state.count++
        })
    }
}

export default Index; */


